<template>
  <div>
      <el-row class="top">
        <el-col :span="10">
          <el-button type="primary" size="small" style="margin-top: 10px;margin-left: 10px">
            <i v-if="perssionButton.indexOf('customer_edit')>-1" class="el-icon-circle-plus" @click="add">&nbsp;&nbsp;新建客户</i>
          </el-button>
          <el-select v-model="selectCustomer" @change="selectOk" v-if="postLevel==1" value-key="value" size="small" style="width: 130px;margin-left: 20px;margin-top: 10px">
            <el-option v-for="options in customerOption" :key="options.value"
                       :label="options.label" :value="options.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-select v-model="typeId" value-key="typeId" size="small" @change="selectOk()" filterable placeholder="全部客户" class="select">
            <el-option label="全部客户" value="0"></el-option>
            <el-option
              v-for="op in options"
              :key="op.typeId"
              :label="op.typeName"
              :value="op.typeId">
            </el-option>
          </el-select>
          <span style="color: #D6CCCF"> &nbsp;&nbsp;  | &nbsp;&nbsp;</span>
          <span style="color: #667B8F">搜索：</span>
          <el-input clearable placeholder="请输入客户名/负责人" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" size="small" v-model="serch" @change="serchCustomer" suffix-icon="el-icon-search" style="width: 180px;cursor:pointer"></el-input>
        </el-col>
        <el-col :span="4" style="margin-top: 10px;">
          <el-select size="small" value="" placeholder="操作" style="width: 90px">
            <el-option value="4" style="height: 35px"><span @click="allExportExcel">导出</span></el-option>
            <el-option value="1" style="height: 35px"><span @click="daoru=true">导入</span></el-option>
            <!--            判断复选框是否至少有一个被选中，如果没有就弹框提示请先选择要转移的客户-->
            <el-option value="2" style="height: 35px" v-if="perssionButton.indexOf('customer_transfer')>-1 || deptId == 1">
              <el-button type="text"  @click="allMessage" style="color: #5F6266">批量转移</el-button>
            </el-option>
            <el-option value="3" style="height: 35px"  v-if="perssionButton.indexOf('customer_merge')>-1">
              <el-button type="text" @click="merge" style="color: #5F6266">客户合并</el-button>
            </el-option>
          </el-select>
          <el-popover
            v-if=" activeTabs=='one'"
            placement="bottom"
            title="全部列名"
            width="100"
            trigger="manual"
            v-model="visible1">
            <el-checkbox-group v-model="colOptions1">
              <el-checkbox v-for="item in colSelect1"
                           :disabled="item=='客户名称' || item=='负责人' || item=='联系人'"
                           :label="item"
                           :key="item"
                           style="display: block" ></el-checkbox>
            </el-checkbox-group>
            <span style="color: red;font-size: x-small;">注：字段过多会出现水平滚动条</span>
            <el-button icon="el-icon-s-tools" size="small" style="width:80px;" slot="reference"
                       @click="visible1 = !visible1">设置</el-button>
          </el-popover>
          <el-popover
            v-if=" activeTabs=='second'"
            placement="bottom"
            title="全部列名"
            width="100"
            trigger="manual"
            v-model="visible2">
            <el-checkbox-group v-model="colOptions2">
              <el-checkbox v-for="item in colSelect2"
                           :disabled="item=='客户名称' || item=='负责人' || item=='联系人'"
                           :label="item"
                           :key="item"
                           style="display: block" ></el-checkbox>
            </el-checkbox-group>
            <span style="color: red;font-size: x-small;">注：字段过多会出现水平滚动条</span>
            <el-button icon="el-icon-s-tools" style="width:87px;" slot="reference"
                       @click="visible2 = !visible2">设置</el-button>
          </el-popover>
        </el-col>
      </el-row>
<!--    我的客户-->
        <el-tabs v-model="activeTabs" type="border-card">
          <el-tab-pane :label="title" name="one">
            <el-table v-loading="loading"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading" :data="tableData" ref="multipleTable1" @selection-change="tableselectionChange" style="width: 100%" height="460">
      <!--          复选框列-->
                <el-table-column type="selection">
                </el-table-column>

                <el-table-column prop="cusName" label="客户名称" v-if="colData1[0].istrue">
                  <template slot-scope="s">
                    {{s.row.cusName}}
                    <i v-if="perssionButton.indexOf('customer_look')>-1" @click="view(s.row)" style="color:#009EFB;cursor:pointer" class="el-icon-s-promotion"></i>
                  </template>
                </el-table-column>

                <el-table-column prop="customEmpid.empName" label="负责人" v-if="colData1[1].istrue">
                </el-table-column>

                <el-table-column prop="culinkmenByCustomId[0].cupName" label="联系人" v-if="colData1[2].istrue">
                </el-table-column>

                <el-table-column prop="culinkmenByCustomId[0].cupPhone" label="联系电话" v-if="colData1[3].istrue">
                </el-table-column>

                <el-table-column prop="typeId.typeName" label="客户类型" v-if="colData1[4].istrue">
                </el-table-column>

                <el-table-column prop="cusSource" label="客户来源" v-if="colData1[5].istrue">
                </el-table-column>

                <el-table-column prop="cusAddressProvince" label="客户地址" v-if="colData1[6].istrue">
                  <template slot-scope="scope">
                    {{scope.row.cusAddressProvince}}{{scope.row.cusAddressCity}}{{scope.row.cusAddressArea}}
                  </template>
                </el-table-column>

                <el-table-column prop="attention" label="是否关注" v-if="colData1[7].istrue">
                  <template slot-scope="at">
                    <span v-if="at.row.attention==1" style="color:blue">已关注</span>
                    <span v-if="at.row.attention==0">未关注</span>
                  </template>
                </el-table-column>

                <el-table-column prop="cusOverTime" sortable label="更新日期" v-if="colData1[8].istrue">
                  <template slot-scope="pe">
                    {{ pe.row.cusOverTime | formatDate}}
                  </template>
                </el-table-column>

                <el-table-column prop="customTime" sortable label="创建日期" v-if="colData1[9].istrue">
                    <template slot-scope="scope">
                      {{ scope.row.customTime | formatDate}}
                    </template>
                </el-table-column>

                <el-table-column prop="" label="操作">
                  <template slot-scope="p">
                    <span v-if="p.row.customEmpid.employeesId==user.employeesId">
                      <el-button v-if="p.row.attention==0" type="text" @click="attention(p.row)" class="el-icon-s-opportunity" title="关注" style="color: black"></el-button>
                      <el-button v-if="p.row.attention==1" type="text" @click="attention(p.row)" class="el-icon-s-opportunity" title="取消关注" style="color: black"></el-button>
                      <el-button type="text" v-if="perssionButton.indexOf('customer_edit')>-1" @click="update(p.row)" title="编辑" class="el-icon-edit" style="color: black"></el-button>
                    &nbsp; <el-button type="text" v-if="perssionButton.indexOf('customer_delete')>-1" @click="del(p.row)" class="el-icon-delete" title="删除" style="color: black"></el-button>
                    </span>
                  </template>
                </el-table-column>
            </el-table>

    <!--      分页-->
            <div class="page">
              <el-pagination
                :page-sizes="sizes"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize"
                :page-size="pageSize"
                :current-page.sync="currPage"
                @current-change="pageChange"
                @size-change="sizeChange">
              </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="特别关注客户" name="second">
          <el-table v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" :data="attentionData" ref="multipleTable2" @selection-change="tableselectionChange" style="width: 100%" height="480">
            <!--          复选框列-->
            <el-table-column type="selection">
            </el-table-column>

            <el-table-column prop="cusName" label="客户名称" v-if="colData2[0].istrue">
              <template slot-scope="s">
                {{s.row.cusName}}
                <i v-if="perssionButton.indexOf('customer_look')>-1" @click="view(s.row)" style="color:#009EFB;cursor:pointer" class="el-icon-s-promotion"></i>
              </template>
            </el-table-column>

            <el-table-column prop="customEmpid.empName" label="负责人" v-if="colData2[1].istrue">
            </el-table-column>

            <el-table-column prop="culinkmenByCustomId[0].cupName" label="联系人" v-if="colData2[2].istrue">
            </el-table-column>

            <el-table-column prop="culinkmenByCustomId[0].cupPhone" label="联系电话" v-if="colData2[3].istrue">
            </el-table-column>

            <el-table-column prop="typeId.typeName" label="客户类型" v-if="colData2[4].istrue">
            </el-table-column>

            <el-table-column prop="cusSource" label="客户来源" v-if="colData2[5].istrue">
            </el-table-column>

            <el-table-column prop="cusAddressProvince" label="客户地址" v-if="colData2[6].istrue">
              <template slot-scope="scope">
                {{scope.row.cusAddressProvince}}{{scope.row.cusAddressCity}}{{scope.row.cusAddressArea}}
              </template>
            </el-table-column>

            <el-table-column prop="cusOverTime" sortable label="更新日期" v-if="colData2[8].istrue">
              <template slot-scope="pe">
                {{ pe.row.cusOverTime | formatDate}}
              </template>
            </el-table-column>

            <el-table-column prop="customTime" sortable label="创建日期" v-if="colData2[9].istrue">
              <template slot-scope="scope">
                {{ scope.row.customTime | formatDate}}
              </template>
            </el-table-column>

            <el-table-column prop="" label="操作">
              <template slot-scope="sp">
                <span v-if="sp.row.customEmpid.employeesId==user.employeesId">
                  <el-button type="text" @click="attention(sp.row)" class="el-icon-magic-stick" title="取消关注" style="color: black"></el-button>
                  <el-button type="text" v-if="perssionButton.indexOf('customer_edit')>-1" @click="update(sp.row)" title="编辑" class="el-icon-edit" style="color: black"></el-button>
                &nbsp; <el-button type="text" v-if="perssionButton.indexOf('customer_delete')>-1" @click="del(sp.row)" class="el-icon-delete" title="删除" style="color: black"></el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>

          <!--      分页-->
          <div class="page">
            <el-pagination
              :page-sizes="sizes3"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize3"
              :page-size="pageSize3"
              :current-page.sync="currPage3"
              @current-change="pageChange3"
              @size-change="sizeChange3">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-row class="tab">
        <!--    统计图-->
        <div class="totalPicture">
          <el-row style="margin-bottom: 35px">
            <el-col :span="2" style="font-weight: bold">
              选择时间：
            </el-col>
            <el-col :span="10">
              <el-date-picker
                v-model="time1"
                size="small"
                type="daterange"
                align="right"
                :picker-options="pickerOptions0"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="selectOk"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row style="font-weight: bold;margin-top: 10px">
            <el-col :span="12">客户状态统计</el-col>
            <el-col :span="10">客户下单量排行</el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <div id="custype">
              </div>
            </el-col>
            <el-col :span="12">
              <div id="columnShape">
              </div>
            </el-col>
          </el-row>
        </div>
      </el-row>
<!--    导入弹框-->
    <el-dialog title="数据导入" :visible.sync="daoru">
      <el-row>
        <table class="rutable" border="1" width="90%">
          <tr>
            <td style="width: 120px;color: gray">文件要求：</td>
            <td>导入EXCEL文件一定要严格按照规定的格式，注意有选择的数据内容</td>
          </tr>
          <tr>
            <td style="width: 120px;color: gray">步骤：</td>
            <td>
              <p style="font-size: 18px;">1.获取excel导入模板，并填写内容</p>
              <el-button type="primary" @click="downloadData" icon="el-icon-download" size="small">下载模板</el-button>
              <p style="font-size: 18px;">2.注意事项</p>
              <p>（1）客户名称、联系人名称、联系电话，负责人必填</p>
              <p>（2）客户来源必须为：电话访问、客户介绍、其他路径，如为空则默认为其他路径</p>
              <p>（3）是否关注如果为空，则默认为否</p>
            </td>
          </tr>
          <tr>
            <td style="width: 120px;color: gray">选择文件</td>
            <td>
              <input type="file" @change="importfxx(this)" id="fileupload" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
            </td>
          </tr>
          <tr>
            <td style="width: 120px">&nbsp;</td>
            <td style="padding-left: 350px">
              <el-button @click="importt" type="primary" size="small">确定导入</el-button>
            </td>
          </tr>
        </table>
      </el-row>
    </el-dialog>
<!--      批量转移弹框-->
    <el-dialog
      title="转移"
      :visible.sync="zy">
      <el-row>
        <el-col :span="16">
          <span style="color:#777;margin-left: 12px">转移给：{{eName}}</span>
        </el-col>
        <el-col :span="6">
          <el-input
            placeholder="请输入员工名" style="width: 200px;cursor: pointer;margin-bottom: 10px"
            v-model="input4" @change="serchEmp" clearable onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" suffix-icon="el-icon-search" size="small">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table :data="userList" height="250" style="width: 100%">
            <el-table-column width="55">
              <template slot-scope="scope1">
                <el-radio v-model="radio" :label="scope1.row.employeesId" @change="getCustomerRow(scope1.row)">
                  {{''}}
                </el-radio>
              </template>
            </el-table-column>

            <el-table-column prop="empName" label="员工" width="120">
            </el-table-column>

            <el-table-column prop="deptByDeptsId.deptName" label="部门">
            </el-table-column>

            <el-table-column prop="empSex" label="性别">
            </el-table-column>

            <el-table-column prop="empPhone" label="手机号">
            </el-table-column>
          </el-table>
        </el-col>
        <div class="page">
          <el-pagination
            :page-sizes="sizes2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize2"
            :page-size="pageSize2"
            :current-page.sync="currPage2"
            @current-change="pageChange2"
            @size-change="sizeChange2">
          </el-pagination>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="empOK">确 定</el-button>
        <el-button @click="zy = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--导出全部客户-->
    <el-table
      :data="customerData"
      style="width: 100%;display: none;"
      height="400" id="outTable">
      <el-table-column  prop="customId" label="客户编号" width="100">
      </el-table-column>

      <el-table-column  prop="cusName" label="客户名称" width="210">
      </el-table-column>

      <el-table-column prop="customEmpid.empName" label="负责人" width="180">
      </el-table-column>

      <el-table-column prop="culinkmenByCustomId[0].cupName" label="联系人" width="120">
      </el-table-column>

      <el-table-column prop="culinkmenByCustomId[0].cupPhone" label="联系电话" width="150">
      </el-table-column>

      <el-table-column prop="cusAddressProvince" label="客户地址" width="210">
        <template slot-scope="scope2">
          {{scope2.row.cusAddressProvince}}{{scope2.row.cusAddressCity}}{{scope2.row.cusAddressArea}}
        </template>
      </el-table-column>

      <el-table-column prop="typeId.typeName" label="客户状态" width="180">
      </el-table-column>

      <el-table-column prop="customTime" sortable label="创建日期" width="210">
        <template slot-scope="scope3">
          {{ scope3.row.customTime | formatDate}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {formatTimeToStr} from '@/assets/format'
import { export2Excel } from '../assets/util'
import echarts from 'echarts'

export default {
  inject: ['reload'],
  name: 'Customer',
  data: function () {
    return {
      selectCustomer:1,//下拉框控制
      customerOption:[
        {label:'我的客户',value:1},
        {label:'下属客户',value:2},
      ],
      postLevel:'',//是否是一级员工
      deptId:'',
      loading: true,
      customerData:[],//导出全部客户
      batchList:[],//批量导出数据处理数组
      serch: '', // 搜索客户名
      fileList: [], //文件数据
      activeTabs:'one',
      visible1:false,
      colOptions1: [
        "客户名称",
        "负责人","联系人",
        "联系电话","客户类型",
        "客户来源","客户地址",
        "是否关注","更新日期","创建日期"
      ], //列表默认全选
      colSelect1: [
        "客户名称",
        "负责人","联系人",
        "联系电话","客户类型",
        "客户来源","客户地址",
        "是否关注","更新日期","创建日期"
      ],//列表数据
      colData1: [
        {title: "客户名称",istrue: true},
        {title: "负责人",istrue: true},
        {title: "联系人",istrue: true},
        {title: "联系电话",istrue: true},
        {title: "客户类型",istrue: true},
        {title: "客户来源",istrue: true},
        {title: "客户地址",istrue: true},
        {title: "是否关注",istrue:true},
        {title: "更新日期",istrue: true},
        {title: "创建日期",istrue: true}
      ],
      visible2:false,
      colOptions2: [
        "客户名称",
        "负责人","联系人",
        "联系电话","客户类型",
        "客户来源","客户地址",
        "是否关注","更新日期","创建日期"
      ], //默认全选
      colSelect2: [
        "客户名称",
        "负责人","联系人",
        "联系电话","客户类型",
        "客户来源","客户地址",
        "是否关注","更新日期","创建日期"
      ],
      colData2: [
        {title: "客户名称",istrue: true},
        {title: "负责人",istrue: true},
        {title: "联系人",istrue: true},
        {title: "联系电话",istrue: true},
        {title: "客户类型",istrue: true},
        {title: "客户来源",istrue: true},
        {title: "客户地址",istrue: true},
        {title:"是否关注",istrue:true},
        {title: "更新日期",istrue: true},
        {title: "创建日期",istrue: true}
      ],
      tableInfo:[
        {name:'客户名称',
          value:'cusName'},
        {name:'负责人',
          value:'empName1',},
        {name:'联系人',
          value:'cupName',},
        {name:'联系电话',
          value:'cupPhone'},
        {name:'客户类型',
          value:'typeName',},
        {name:'客户来源',
          value:'cusSource',},
        {name:'客户地址',
          value:'cusAddressProvince',},
        {name:'是否关注',
          value:'attention',},
        {name:"更新日期",
          value:'cusOverTime1'},
        {name:'创建日期',
          value:'customTime1',},
      ],
      empradio: '', // 选择数据负责人单选框
      tableData: [], // 我的客户列表
      attentionData:[],//关注客户列表
      multipleTable: [], // 选中的客户
      array: [], // 转移的客户id
      // 客户分页
      totalSize: 0, //     总条数
      currPage: 1, //     默认第一页
      pageSize: 10, //      页大小
      sizes: [10,20,30,40], // 客户页大小数组
      totalSize3: 0, //     总条数
      currPage3: 1, //     默认第一页
      pageSize3: 0, //      页大小
      sizes3: [10,20,30,40], // 关注客户页大小数组
      // 员工分页
      totalSize2: 0, //     总条数
      currPage2: 1, //     默认第一页
      pageSize2: 0, //      页大小
      sizes2: [10, 20, 30, 40], // 员工页大小数组
      // 客户类型下拉选项
      options: [],
      typeId: '', // 客户类型下拉框
      daoru:false,//导入弹框
      isAdd:false,//导入数据的负责人
      zy: false, // 转移弹框
      input4: '', // 请输入用户名
      userList: [], // 员工列表
      radio: '', // 单选框
      emp:[], //选中的员工对象（需要转移给的员工）
      eName:'',//转移给的员工姓名
      typeCount:0,//当前登录员工的客户总数
      typeAllCount:[],//当前登录员工的的客户类型统计
      //用于下载的导出Excel模板
      customerExcel: [
        {cusName: ''},
        {cusSource: ''},
        {attention: ''},
        {cusAddressProvince:''},//省份
        {cusAddressCity:''},//城市
        {cusAddressArea:''},//区县
        {cusRemarks:''},//备注
        {cupName:''},//联系人
        {cupPhone:''},
        {cupAddressProvince:''},
        {cupAddressCity:''},
        {cupAddressArea:''},
        {cupEmail:''},
        {empName:''},//所有者
      ],
      textLine:'客户来源',
      xLine:['其他途径','客户介绍','电话访问'],

      //导出
      listDaoChu:[],//用于保存导出数据
      //表头数据
      columns:[
        // {title: "ID",key: 'cusId'},
        {title: "*客户名称",key: 'cusName'},
        {title: "客户来源",key: 'cusSource'},
        {title: "是否关注(是/否)",key: 'attention'},
        {title: "客户省份",key: 'cusAddressProvince'},
        {title: "客户城市",key: 'cusAddressCity'},
        {title: "客户区县",key: 'cusAddressArea'},
        {title: "备注",key: 'cusRemark'},
        {title: "*联系人",key: 'cupName'},
        {title: "*联系电话",key: 'cupPhone'},
        {title: "邮箱",key: 'cupEmail'},
        {title: "联系人省份",key: 'cupAddressProvince'},
        {title: "联系人城市",key: 'cupAddressCity'},
        {title: "联系人区县",key: 'cupAddressArea'},
        {title: "*负责人",key:'employeesId'},
      ],
      importTable:[],//导入的数据
      tableRules:false,//导入数据验证
      user:{
        employeesId:'',
        empName:'',
      },//当前登录员工对象
      perssionButton:[],//标识符
      allCusName:[],//所有客户名称
      time1:[],//时间段统计
      chooseYear:'',//选择年份
      // 设置时间选择器只能选择当前时间之前的时间
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      orderNum:[],//客户下单量
    }
  },
  created: function () {
    this.authentication();
    // 获取当前登录员工对象
    this.user = JSON.parse(sessionStorage.getItem('user'));
    this.initButton()
    if(this.$route.path != null && this.$route.path != ""){
      this.selectOk()
      // this.init(this.currPage,this.pageSize,this.serch,this.typeId,this.user.employeesId)
      this.loading=false
    }
    this.pageSize = this.sizes[0] // 默认第一个页大小
    this.selectOk() // 初始化
    this.pageSize2 = this.sizes2[0] // 默认第一个页大小
    this.pageSize3 = this.sizes3[0]
    this.initEmp(this.currPage2, this.pageSize2);//初始化负责人
  },
  methods: {
    //验证用户身份
    authentication(){
      var id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
      //获取用户是否是一级角色
      this.$axios.get("http://localhost:8088/is_one_Role",{params:{empId:id}})
        .then(v=> {
          if (v.data.postLevel == 1) {//用户是一级角色
            //查询出能看到的部门信息
            if (v.data.deptId == 1) {
              this.customerOption.push({label:'全部客户',value:3});
            }
            this.postLevel = 1;
          }
          this.deptId = v.data.deptId;//记录部门id
      }).catch();
    },
    //查看可看数据
    selectOk() {
      // 查询当前登录员工的客户总数量
      var str='';
      if(this.time1 != null){
        str = this.time1[0]+','+this.time1[1];
        if(this.time1[0]==undefined){
          str='';
        }
      }
      if (this.selectCustomer == 1) {//查看自己的客户
        this.title = '我的客户';
        this.init(
          this.currPage,
          this.pageSize,
          this.serch,
          this.typeId,
          this.user.employeesId,
          -1);
        this.selectTongji(-1,this.user.employeesId,str)
        this.initAttention(
          this.currPage3,
          this.pageSize3,
          this.serch,
          this.typeId,
          this.employeesId,
          -1);
      } else if (this.selectCustomer == 2) {//查看下属客户
        this.title = '下属客户';
        this.init(
          this.currPage,
          this.pageSize,
          this.serch,
          this.typeId,
          -1,
          this.deptId);
        this.selectTongji(this.deptId,-1,str)
        this.initAttention(
          this.currPage3,
          this.pageSize3,
          this.serch,
          this.typeId,
          -1,
          this.deptId);
      } else if (this.selectCustomer == 3) {//查看全部客户
        this.title = '全部客户';
        this.init(
          this.currPage,
          this.pageSize,
          this.serch,
          this.typeId,
          -1,
          -1);
        this.selectTongji(-1,-1,str)
        this.initAttention(
          this.currPage3,
          this.pageSize3,
          this.serch,
          this.typeId,
          -1,
          -1);
      }
    },
    // 客户模糊查询
    InIt(currPage,pageSize){
      if(this.selectCustomer == 1){
        // 我的客户
        this.init(currPage,pageSize,this.serch,this.typeId,this.user.employeesId,-1)
      }else if(this.selectCustomer == 2){
        // 下属客户
        this.init(currPage,pageSize,this.serch,this.typeId,-1,this.deptId);
      }else if(this.selectCustomer == 3){
        // 全部客户
        this.init(currPage,pageSize,this.serch,this.typeId,-1,-1);
      }
    },
    // 关注客户模糊查询
    InItAttention(currPage,pageSize){
      if(this.selectCustomer == 1){
        // 我的客户
        this.initAttention(currPage,pageSize,this.serch,this.typeId,this.user.employeesId,-1)
      }else if(this.selectCustomer == 2){
        // 下属客户
        this.initAttention(currPage,pageSize,this.serch,this.typeId,-1,this.deptId);
      }else if(this.selectCustomer == 3){
        // 全部客户
        this.initAttention(currPage,pageSize,this.serch,this.typeId,-1,-1);
      }
    },
    initButton(){//标识符
      this.perssionButton=JSON.parse(sessionStorage.getItem("button"));
    },
    //导出客户
    allExportExcel () {
      this.$confirm('确定导出表中数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.activeTabs == 'one') {
          this.export2Excel(this.customerData, this.colData1);
        } else if (this.activeTabs == 'second') {
          this.export2Excel(this.attentionData, this.colData2);
        }
        this.$message({type: 'success', message: '导出成功!'});
      }).catch(() => {
        this.$message({type: 'info', message: '已取消导出'});
      });

    },
    //导出操作
    export2Excel (multipleTable, tableDataColunm) {
      multipleTable.forEach((item, i) => {
        this.$set(item, 'cusName', item.cusName);
        this.$set(item, 'empName1', item.customEmpid.empName);
        this.$set(item, 'cupName', item.culinkmenByCustomId[0].cupName);
        this.$set(item, 'cupPhone', item.culinkmenByCustomId[0].cupPhone);
        this.$set(item, 'typeName', item.typeId.typeName);
        this.$set(item, 'cusSource', item.cusSource);
        this.$set(item, 'cusAddressProvince', item.cusAddressProvince + item.cusAddressCity + item.cusAddressArea);
        this.$set(item, 'specialAttention', item.attention = 0 ? '未关注' : '已关注');
        this.$set(item, 'cusOverTime1', formatTimeToStr(item.cusOverTime, 'yyyy-MM-dd'));
        this.$set(item, 'customTime1', formatTimeToStr(item.customTime, 'yyyy-MM-dd'));
        this.batchList.splice(i, 0, item);
      })
      //excel数据导出
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../assets/Export2Excel');
        const tHeader = [];
        const filterVal = [];
        tableDataColunm.forEach((item) => {
          if (item.istrue == true) {
            this.tableInfo.forEach((val) => {
              if (item.title == val.name) {
                tHeader.push(item.title);//表头
                filterVal.push(val.value);//表字段
              }
            })
          }
        })
        const list = this.batchList;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '客户导出');
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 导入客户
    importfxx (obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据

      this.file = event.currentTarget.files[0];

      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader();
      const excelDate = [];//导入的数据

      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function (e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
          console.log(outdata)
          if (outdata.length == 0) {
            this.message.error("该文件为空，请重新选择！")
          } else {
            window.console.log("长度：" + outdata.length);
            outdata.forEach((item) => {
              const shu = {}
              shu.cusName = item["*客户名称"]
              shu.cusSource = item["客户来源"]
              if(item["客户来源"]=="" || item["客户来源"]==null){
                shu.cusSource="其他路径"
              }
              if(item["是否关注(是/否)"] == "否"){
                shu.attention = 0
              }else if(item["是否关注(是/否)"] == "" || item["是否关注(是/否)"] == null){
                shu.attention = 0
              }else if (item["是否关注(是/否)"] == "是"){
                shu.attention = 1
              }else if (item["是否关注(是/否)"] != "是" && item["是否关注(是/否)"] != "否") {
                shu.attention = 2
              }
              window.console.log("是否关注:"+item["是否关注(是/否)"]+shu.attention);
              shu.cusAddressProvince = item["客户省份"]
              shu.cusAddressCity = item["客户城市"]
              shu.cusAddressArea = item["客户区县"]
              shu.cusRemark = item["备注"]
              shu.cupName=item["*联系人"]
              shu.cupPhone=item["*联系电话"]
              shu.cupEmail=item["邮箱"]
              shu.cupAddressProvince=item["联系人省份"]
              shu.cupAddressCity=item["联系人城市"]
              shu.cupAddressArea=item["联系人区县"]
              shu.empName=item["*负责人"]
              excelDate.splice(i, 0, shu)
              console.log("excelDate:" + excelDate)
            })
          }
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
      // 将导入的数据赋值给importTable
      this.importTable = excelDate;

    },
    importt () {
      if(this.importTable!=null && this.importTable!="") {
        var customer = JSON.stringify({customer: this.importTable})
        this.$axios.post("http://localhost:8088/vue/dao-customer", this.qs.stringify({customer: customer}))
          .then(v => {
            if (v.data != null && v.data != "") {
              this.$message.error(v.data)
              // 导入失败清空文件
              var obj = document.getElementById('fileupload') ;
              obj.outerHTML=obj.outerHTML;
              this.daoru = false
              this.reload()
            } else {
              this.daoru = false
              this.$message.success("导入成功")
              // 导入成功后清空选择文件
              var obj = document.getElementById('fileupload') ;
              obj.outerHTML=obj.outerHTML;
              this.selectOk()
            }
          }).catch()
      }else{
        this.$message.error("请选择导入文件！")
      }
    },
    //下载导入模板
    downloadData(){
      export2Excel(this.columns,this.customerExcel)
    },
    // 客户初始化
    init (currPage, pageSize, serch, typeId, empId, deptId) {
      this.$axios.get('http://localhost:8088/vue/page-select', {
        params: {
          page: currPage,
          size: pageSize,
          cusName: serch,
          typeId: typeId,
          empId: empId,
          deptId: deptId
        }
      })
      .then(v => {
        this.tableData = v.data.rows
        this.totalSize = v.data.total
        this.options = v.data.typeList // 客户类型下拉框
        this.customerData=v.data.exportList;
        this.loading=false;
      })
      .catch(v => {
        alert('访问失败！' + v.data)
      })
    },
    pageChange (page) { // 客户切换页码
      this.init(page, this.pageSize, this.serch, this.typeId,this.user.employeesId)
    },
    sizeChange (pageSize) { // 客户页大小改变
      this.init(1, pageSize, this.serch, this.typeId,this.user.employeesId)
      this.pageSize = pageSize
      window.console.log(pageSize)
    },
    serchCustomer () { // 客户模糊查询、条件查询
        // 客户查询
        this.InIt(1, this.pageSize)
        // 关注客户查询
        this.InItAttention(1, this.pageSize3)
    },
    tableselectionChange (demo) { //将选中的客户存入数组
      this.multipleTable = demo //方便判断是否有选中客户
      window.console.log("选中客户的负责人id："+this.multipleTable[0].customEmpid.employeesId)
      this.array = [] // 循环之前清空
      this.multipleTable.forEach((or) => {
        this.array.push(or.customId) //选中的客户id
      })
      window.console.log(this.array)
    },
    allMessage () { // 判断是否有选中客户
      if (this.count > 0) {
        this.zy = true
      } else {
        this.$message.error('请先选择客户')
      }
      window.console.log(this.count)
    },
    //转移负责人
    initEmp (currPage, pageSize, empName) { // 查询销售部员工
      this.$axios.get('http://localhost:8088/vue/select-emp', {
        params: {
          page: currPage,
          size: pageSize,
          empName: empName
        }
      })
      .then(v => {
        this.userList = v.data.rows
        // 获取当前登录用户id
        let id = JSON.parse(sessionStorage.getItem('user')).employeesId;
        // 删除负责人列表的当前登录人id(不能自己转移给自己)
        this.userList.forEach((item,i)=>{
          if(id==item.employeesId){
            this.userList.splice(i,1);
          }
        })
        this.totalSize2 = parseInt(v.data.total)-1;
      }).catch()
    },
    pageChange2 (page) { // 员工切换页码
      this.initEmp(page, this.pageSize2, this.input4)
    },
    sizeChange2 (pageSize) { // 员工页大小改变
      this.initEmp(1, pageSize, this.input4)
      this.pageSize2 = pageSize
    },
    serchEmp () { // 员工模糊查询
      this.initEmp(1, this.pageSize2, this.input4)
    },
    //单选框选中的行
    getCustomerRow (val) {
      this.emp = [];//单选框每次只能选择一个，所以每次选中之前要先清空
      this.emp.push(val);
      this.eName = this.emp[0].empName
      window.console.log("aaa:"+this.emp[0].employeesId)
    },
    empOK () { // 确定选中员工
      if (this.emp == null || this.emp == "") {
        this.$message("请选择负责人")
      } else {
        var params = new URLSearchParams();//请求头
        params.append('employeesId', this.emp[0].employeesId);
        params.append('customIdArr', this.array);
        this.$axios.post("http://localhost:8088/vue/choose-emp", params)
          .then(() => {
            this.zy = false
            this.$message.success("转移成功")
            this.selectOk()
          })
          .catch()
      }
    },
    // 访问后台查询
    selectTongji(deptId,empId,str){
      // 客户下单量
      this.$axios.get("http://localhost:8088/vue/order-num",{params:{deptId:deptId,empId:empId,str:str}})
        .then(v=>{
          this.orderNum=v.data
        })
        .catch()

      // 当前登录人负责的客户总数
      this.$axios.get("http://localhost:8088/vue/nums",{params:{deptId:deptId,empId:empId,str:str}})
        .then(v=>{
          this.typeCount=v.data
        })
        .catch()

      // 查询当前登录员工的客户类型比例
      this.$axios.get("http://localhost:8088/vue/type",{params:{deptId:deptId,empId:empId,str:str}})
        .then(v=>{
          this.typeAllCount=v.data
        }).catch()
    },
    // 关注客户初始化
    initAttention(currPage, pageSize, serch, typeId, empId,deptId){
      this.$axios.get("http://localhost:8088/vue/select-attention",{
        params: {
          page: currPage,
          size: pageSize,
          cusName: serch,
          typeId: typeId,
          empId:empId,
          deptId:deptId
        }
      })
      .then(v=>{
        this.attentionData=v.data.rows
        this.totalSize3=v.data.totals
        this.loading=false;
      }).catch()
    },
    pageChange3 (page3) { // 关注客户切换页码
      this.initAttention(page3,this.pageSize3, this.serch, this.typeId,this.user.employeesId)
    },
    sizeChange3 (pageSize3) { // 关注客户页大小改变
      this.initAttention(1,pageSize3, this.serch, this.typeId,this.user.employeesId)
      // this.pageSize3 = pageSize3
    },
    // 点击关注或取消关注
    attention(row){
      var attent=JSON.stringify({attent:row.customId})
      this.$axios.post("http://localhost:8088/vue/update-attention",this.qs.stringify({attent:attent}))
      .then(()=>{
        if(row.attention==0){
          this.$message.success("关注成功")
          this.selectOk()
        }else {
          this.$message.success("取消关注成功")
          this.selectOk()
          this.loading=false;
        }
      }).catch()
    },

    add () {//新增客户按钮
      // 带参数跳转页面
      this.$router.push({
        path: '/stomeradd',
      })
    },
    update (row) { // 客户编辑按钮
      // 带参数跳转页面
      this.$router.push({
        path: '/stomeradd',
        query: {
          customer: row
        }
      })
    },
    del (row) { // 删除客户操作
      this.$confirm('此操作将永久删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var customId = JSON.stringify({customId: row.customId})
        this.$axios.post("http://localhost:8088/vue/del-customer", this.qs.stringify({customId: customId}))
          .then(v => {
            console.log(v.data)
            if(v.data != null && v.data != ""){
              this.$message.error(v.data)
            }else{
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.selectOk()
              // 刷新表格
              // this.init(this.currPage, this.pageSize, this.serch, this.typeId,this.user.employeesId)
            }
          }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    view (row) { // 客户视图
      this.$router.push({
          path: '/customerview',
          query: {
            customId:  row.customId
          }
        })
      console.log(row.customId)
    },
    merge(){//跳转到合并页面
      this.$router.push({
        path:'/customermerge'
      })
    },

    customerType () { // 统计每个月的客户类型比例
      var data = this.typeAllCount
      let elementByid = document.getElementById('custype')
      let custype = this.$echarts.init(elementByid)
      let option = {
        color: ['#5FBEAA', '#1E9BD1', '#6C85BD', '#6BD089'],
        // backgroundColor: '#000',
        title: {
          text: '总数',
          subtext: this.typeCount,
          textStyle: {
            color: '#303133',
            fontSize: 40,
            align: 'center'
          },
          subtextStyle: {
            fontSize: 30,
            center:['60%','50%'],
            color: ['#ff9d19']
          },
          x: '43%',
          y: '55%'
        },
        grid: {
          bottom: 150,
          left: 100,
          right: '10%'
        },
        legend: {
          // orient: 'vertical',//竖直排列
          top: '12%',
          right: '5%',
          textStyle: {
            color: '#303133',
            fontSize: 15
          },
          icon: 'roundRect',
          data: this.typeAllCount
        },
        series: [
          // 主要展示层的
          {
            radius: ['30%', '61%'],
            center: ['50%', '65%'],
            type: 'pie',
            label: {
              normal: {
                show: true,
                formatter: '{c}%',
                textStyle: {
                  fontSize: 30
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 25
              },
              emphasis: {
                show: true
              }
            },
            name: '民警训练总量',
            data: this.typeAllCount
          },
          // 边框的设置
          {
            radius: ['30%', '34%'],
            center: ['50%', '65%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            data: [{
              value: 1,
              itemStyle: {
                color: 'rgba(250,250,250,0.3)'
              }
            }]
          }, {
            name: '外边框',
            type: 'pie',
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            center: ['50%', '65%'],
            radius: ['65%', '65%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 9,
              name: '',
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  borderColor: '#0b5263'
                }
              }
            }]
          }
        ]
      }
      custype.setOption(option)
    },
    //柱形图
    columnShapeChat(){
      let elementByid = document.getElementById('columnShape')
      let columnShape = this.$echarts.init(elementByid)
      var charts = this.orderNum // 按顺序排列从大到小
      var top10CityList = charts.name//客户名
      var top10CityData = charts.value//下单量
      var color = ['rgba(248,195,248', 'rgba(100,255,249', 'rgba(135,183,255', 'rgba(248,195,248', 'rgba(100,255,249']

      let lineY = []
      for (var i = 0; i < charts.name.length; i++) {
        var x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        var data = {
          name: charts.name[i],
          color: color[x] + ')',
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color[x] + ', 0.3)'
              }, {
                offset: 1,
                color: color[x] + ', 1)'
              }], false),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }

      console.log(lineY)
      let option = {
        // backgroundColor: '#F0F0F0',
        title: {
          show: false
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          borderWidth: 0,
          top: '10%',
          left: '5%',
          right: '15%',
          bottom: '3%'
        },
        color: color,
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            inside: false
          },
          data: top10CityList.reverse()
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: '14',
              fontFamily: 'PingFangSC-Regular'
            },
            /*formatter: function(val) {
              return `${val}`
            }*/
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: top10CityData.reverse()
        }],
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [{
          name: '',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          data: lineY,
          animationDuration: 1500,
          label: {
            normal: {
              color: '#b3ccf8',
              show: true,
              position: [0, '-24px'],
              textStyle: {
                fontSize: 16
              },
              formatter: function(a, b) {
                return a.name
              }
            }
          }
        }],
        animationEasing: 'cubicOut'
      }
      columnShape.setOption(option)
    },
  },
  mounted () {
    setTimeout(()=>{this.customerType()},500);
    setTimeout(()=>{this.columnShapeChat()},500);
  },
  watch:{//监听那个数据发生了变化就调用某个查询方法
    $route(){
      if(this.$route.path != null && this.$route.path != ""){
        this.selectOk()
        // this.init(this.currPage,this.pageSize,this.serch,this.typeId,this.user.employeesId)
        this.loading=false
      }
    },
    // 动态列
    colOptions1(valArr) {
      var arr = this.colSelect1.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.colData1.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.multipleTable1.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.multipleTable1.doLayout();
          });
        }
      });
    },
    colOptions2(valArr) {
      var arr = this.colSelect2.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.colData2.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.multipleTable2.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.multipleTable2.doLayout();
          });
        }
      });
    },
    // 监听时间段是否发生变化
    typeCount(val){
      // 调用访问后台方法
      this.customerType()
    },
    typeAllCount(val){
      this.customerType()
    },
    // 监听年份是否发生变化
    orderNum(val){
      this.columnShapeChat()
    }
  },
  filters: {// 日期格式化
    formatDate: function (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd')
      } else {
        return ''
      }
    },
  },
  computed: {
    count () { //获取选中几个客户
      return this.multipleTable.length
    }
  }
}
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    background: white;
  }

  a{
    cursor:pointer;
    text-decoration: none;
  }

  a:active{
    color: #333333;
  }

  .select{
    padding:10px;
    width: 150px;
  }

  .tab{
    border: 1px solid #D3DCE6;
    padding-bottom: 15px;
    background: white;

  }

  .page{
    margin-top:10px;
    margin-right: 20px;
    float: right;
  }

  .block{
    float: right;
    margin-top: 10px;
    margin-right: 20px;
  }

  .totalPicture{
    width:95%;
    border: 0px solid #e4e4e4;
    margin:0 auto;
    margin-top: 84px;
  }

  #custype{
    height:420px;
    border:0px solid red;
  }
  #columnShape{
    height:500px;
    border: 1px solid white;
    margin-left: 25px;
  }
  .rutable{
    margin-left: 30px;
    border-collapse: collapse;
    border-right: white;
    border-left: white;
    border-top: lightgray;
    border-bottom: lightgray;
  }

  .rutable tr{
    height: 60px;
    border-right: white;
    border-bottom-color: lightgray;
  }
</style>
